<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Air Conditioner Detail Info</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <link href="../../static/layui/css/layui.css" th:href="@{/webjars/layui/css/layui.css}" rel="stylesheet">

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/distpicker/2.0.5/distpicker.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/store.js/1.3.20/store.min.js" th:src="@{/webjars/store.js/store.min.js}"></script>

    <script type="text/javascript" src="../../static/layui/layui.all.js" th:src="@{/webjars/layui/layui.all.js}"></script>
    <script type="text/javascript" src="../../static/layui/layui.js" th:src="@{/webjars/layui/layui.js}"></script>
    <script type="text/javascript" src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" src="../../static/js/air.conditioner.js" th:src="@{/js/air.conditioner.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 头部导航栏 -->
    <div id="header-navigation-div-id"></div>

    <!-- 侧边导航栏 -->
    <div id="side-navigation-div-id"></div>

    <div class="layui-body" style="left: 300px;">
        <!-- 内容主体区域 -->
        <div style="padding: 15px; overflow: hidden">
            <div class="layui-container" style="
                border: 1px solid #1E9FFF;
                float: right;
                margin: 50px 200px 0 0;
                padding: 20px;
                background-color: #e2e2e2;
                border-radius: 10px;
                  ">
                <h3 style="text-align: center">设备信息详情</h3>
                <form id="add-info-form" action="#" method="post" class="form-horizontal" role="form" style="width: 95%; margin-top: 50px;">
                    <input type="hidden" id="conditioner-id">
                    <div class="form-group">
                        <label for="brand" class="col-sm-3 control-label">品牌</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="brand" name="brand" placeholder="请输入品牌">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="model" class="col-sm-3 control-label">型号规格</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="model" name="model" placeholder="请输入型号规格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="seller" class="col-sm-3 control-label">销售单位</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="seller" name="seller" placeholder="请输入销售单位">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="address" class="col-sm-3 control-label"><span style="margin-right: 10px;font-size: 17px;color: red;">*</span>设备地址</label>
                        <div class="col-sm-9">
                            <div id="address">
                                <select class="form-control" id="address-province" style="width: 32%; display: inline-block"></select>
                                <select class="form-control" id="address-city" style="width: 31%; display: inline-block; margin: 0 2%"></select>
                                <select class="form-control" id="address-district" style="width: 32%;  display: inline-block"></select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address-detail" class="col-sm-3 control-label">详细地址</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="address-detail" rows="3" style="resize:none" placeholder="请输入详细地址"></textarea>
                        </div>
                    </div>

                    <fieldset disabled>
                        <div class="form-group">
                            <label for="equipmentId" class="col-sm-3 control-label">设备编号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="equipmentId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gmtCreate" class="col-sm-3 control-label">创建时间</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="gmtCreate">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gmtModified" class="col-sm-3 control-label">刷新时间</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="gmtModified">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="temperature" class="col-sm-3 control-label">温度(℃)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="temperature">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="windSpeed" class="col-sm-3 control-label">风速</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="windSpeed">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="kwh" class="col-sm-3 control-label">用电量(Kw/h)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="kwh">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="currentIntensity" class="col-sm-3 control-label">电流(A)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="currentIntensity">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="voltage" class="col-sm-3 control-label">电压(V)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="voltage">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="power" class="col-sm-3 control-label">功率(W)</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="power">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="owner" class="col-sm-3 control-label">拥有者</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="owner">
                            </div>
                        </div>

                    <div class="form-group">
                        <label for="equipmentState" class="col-sm-3 control-label">状态</label>
                        <div class="col-sm-9">
                            <select id="equipmentState" class="form-control">
                                <option value="GOOD">良好</option>
                                <option value="FAULT">故障</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="faultDescription" class="col-sm-3 control-label">故障描述</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" id="faultDescription" rows="3" style="resize:none"></textarea>
                        </div>
                    </div>

                    </fieldset>

                    <div class="form-group" id="btn-div-id">
                        <div class="col-sm-offset-2 col-sm-6" style="width: 40%; margin: 0 auto">
                            <button class="btn btn-success" id="update-btn" style="margin: 20px 0 0 65%; width: 100px;">更新</button>
                        </div>
                        <div class="col-sm-offset-2 col-sm-6" style="width: 40%; margin: 0 auto">
                            <button class="btn btn-danger" id="delete-btn" style="margin: 20px 0 0 65%; width: 100px;">删除</button>
                        </div>
                    </div>


                </form>
            </div>
        </div>

        <!--  分割线  -->
        <hr class="layui-bg-blue" style="margin-bottom: 30px; margin-top: 30px;">

        <!--  该设备的维修记录  数据展示表格    -->
        <h3 style="text-align: center; margin-bottom: 20px;">设备维修记录</h3>
        <div style="margin: 0 10px; padding: 0 10px; border: 1px solid #1E9FFF; border-radius: 5px;">
            <table id="dataTableId" lay-filter="dataTableId"></table>
        </div>

    </div>

    <!-- 页脚 -->
    <div id="footer-div-id"></div>
</div>

<script type="text/html" id="tableBarCustomRepair">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
</script>

<script type="text/javascript">

    window.onload = function (ev) {

        // 页面初始化
        pageAfterOnloadInit();

        // 填充表单数据
        fillEquipmentInfo();

        // 退出事件
        document.getElementById('logout-btn-id').onclick = logoutEvent;

    }

</script>

<script type="text/javascript">

    //////////////// function defined ///////////////////////////////

    // 页面初始化
    function pageAfterOnloadInit() {
        initHeaderNavigationDiv();
        var loginUser = getValidValueFromStore(LOGIN_USER_KEY);
        if (loginUser.role === 'ORDINARY') {
            initSideNavigationDivOrdinaryEquipment();
            // 设置“更新”按钮事件
            document.getElementById('update-btn').onclick = updateInfoFormSubmitEvent;

            // 设置“删除”按钮事件
            document.getElementById('delete-btn').onclick = InfoFormDeleteEvent;
        } else {
            initSideNavigationDivCustomOrRepairEquipment();
            $("#btn-div-id").replaceWith('');
        }
        initFooterDiv();
        // layui 初始化
        layuiInit();

        // 数据表格初始化
        layuiTableInit();
    }


    function layuiTableInit() {
        layui.use('table', function () {
            var table = layui.table;

            var url = FAULT_BASE_MAPPING_V1 + "/air-conditioner-id/" + $("#conditioner-id").val().trim();
            var tableData = getDataFromServer(url);

            // 表格渲染
            table.render({
                elem: '#dataTableId',
                id: 'dataTableId',
                url: '',  // 默认数据查询数据接口
                loading: true,  // 显示加载条
                page: true,     // 开启分页
                even: true,     // 设置隔行背景
                data: tableData,
                cols: [
                    [   //表头
                        {field: 'id', hide: true},
                        {field: 'equipmentId', title: '设备编号', sort: true, align: 'center', width: 169},
                        {field: 'type', title: '故障类型', sort: true, align: 'center', width: 169},
                        {field: 'state', title: '故障状态', sort: true, align: 'center', width: 169},
                        {field: 'gmtModified', title: '刷新时间', sort: true, align: 'center', width: 169},
                        {field: 'description', title: '故障描述', sort: true, align: 'center'},
                        {title: '操作', width: 129, align: 'center', toolbar: '#tableBarCustomRepair'}
                    ]
                ]
            });

            //监听行工具事件，行末按钮事件
            table.on('tool(dataTableId)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data;         //获得当前行数据
                var layEvent = obj.event;    //获得 lay-event 对应的值
                if(layEvent === 'detail'){

                    // 打开 update-info 页面
                    var url = FAULT_BASE_MAPPING_V1 + "/page/update?faultId=" + data.id;
                    window.open(url);

                }
            });
        });
    }


    // 填充表单数据
    function fillEquipmentInfo() {
        var params = parseUrlParameter(window.location.search);
        var equipmentId = params.equipmentId;
        // 发送查询设备是否存在请求
        $.ajax({
            url: AIR_CONDITIONER_BASE_MAPPING_V1 + "/" + equipmentId,
            type: "get",
            async: false,
            success: function (result, status, xhr) {
                var obj = JSON.parse(result);
                var code = obj.code;
                var message = obj.message;
                var data = obj.data;
                if (code !== 200) {
                    kingLayerMsg(message, airConditionerDefaultLayerMsgOptions);
                } else {
                    $("#conditioner-id").val(data.id);
                    $("#brand").val(data.brand);
                    $("#model").val(data.model);
                    $("#seller").val(data.seller);

                    $("#address").distpicker({
                        province: data.address.province,
                        city: data.address.city,
                        district: data.address.district
                    });

                    $("#address-detail").text(data.address.detail);
                    $("#equipmentId").val(data.equipmentId);
                    $("#gmtCreate").val(data.gmtCreate);
                    $("#gmtModified").val(data.gmtModified);
                    $("#temperature").val(data.temperature);
                    $("#windSpeed").val(data.windSpeed);
                    $("#kwh").val(data.kwh);
                    $("#currentIntensity").val(data.currentIntensity);
                    $("#voltage").val(data.voltage);
                    $("#power").val(data.power);
                    var owner = data.user.username.trim();
                    if (owner.length <= 0) {
                        owner = data.user.email;
                    }
                    $("#owner").val(owner);

                    var equipmentState = data.equipmentState.trim();
                    if (equipmentState == 'GOOD') {
                        document.getElementById("equipmentState").options[0].selected = true;
                    } else {
                        document.getElementById("equipmentState").options[1].selected = true;
                    }
                    $("#faultDescription").text(data.faultDescription);
                }
            }
        });
    }

    // “更新”按钮事件
    function updateInfoFormSubmitEvent(ev) {

        // 查看地址是否填写
        if (!checkAddressInfoAndTip()) {
            return false;
        }

        // 确认更新
        layer.confirm('确认更新?', {icon: 1, title: '提示'}, function (index) {
            // 向服务器发送更新请求
            $.ajax({
                url: AIR_CONDITIONER_BASE_MAPPING_V1 + "/update",
                type: "post",
                async: false,
                data: {
                    'equipmentId': $("#equipmentId").val(),
                    'brand': $("#brand").val(),
                    'model': $("#model").val(),
                    'seller': $("#seller").val(),
                    'address.province': $("#address-province").val(),
                    'address.city': $("#address-city").val(),
                    'address.district': $("#address-district").val(),
                    'address.detail': $("#address-detail").val()
                },
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code !== 200) {
                        kingLayerMsg(message, airConditionerDefaultLayerMsgOptions);
                    } else {
                        kingLayerMsg("更新成功！", airConditionerDefaultLayerMsgOptions);
                        setTimeout(function () {
                            window.location.reload();
                        }, SLEEP_TIME);
                    }
                }
            });
            layer.close(index);
        });
        return false;
    }

    // “删除”按钮事件
    /**
     * @return {boolean}
     */
    function InfoFormDeleteEvent(ev) {

        // 确认删除
        layer.confirm('确认删除?', {icon: 2, title: '提示'}, function (index) {
            var url = AIR_CONDITIONER_BASE_MAPPING_V1 + "/" + $("#equipmentId").val() + "/delete";
            // 向服务器发送删除请求
            $.ajax({
                url: url,
                type: "post",
                async: false,
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code !== 200) {
                        kingLayerMsg(message, airConditionerDefaultLayerMsgOptions);
                    } else {
                        kingLayerMsg("删除成功！", airConditionerDefaultLayerMsgOptions);
                        setTimeout(function () {
                            window.location.href = AIR_CONDITIONER_BASE_MAPPING_V1 + "/page/online-state"
                        }, SLEEP_TIME);
                    }
                }
            });
            layer.close(index);
        });
        return false;
    }

</script>
</body>
</html>